<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
    <!-- Mobile Devices Support @begin -->
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control"/>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="0" http-equiv="expires"/>
    <meta content="telephone=no, address=no" name="format-detection"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!-- Mobile Devices Support @end -->
    <title>{$game['title']}</title>
    <link rel="stylesheet" href="{$UrlPath}/css/style.css" />
    <link rel="stylesheet" href="{$UrlPath}/css/main.css">
    <script type="text/javascript" src="{$UrlPath}/js/jquery.js"></script>  
    <script type="text/javascript" src="{$UrlPath}/js/common.js"></script>
    <style>
    	html{font-size:312.5%;}
    	.score-container:after {
		  content: "得分";font-size:0.32rem;
		}
		
		.best-container:after {
		  content: "历史最高";font-size:0.32rem;
		}

    </style>
    <script>
        init_rem();
        function init_rem(){
            var iw = 750;
//            var w = window.innerWidth;
            var w = $(window).width();
            /*if(w>375){
                w = 375;
            }*/
            var irate= 625/(iw/w);
            /*if(irate > 298.3333333333333){
                irate = 288.3333333333333;
            }*/
            var str = 'html{font-size:' + irate + '%' + '}';
            var h_style = document.createElement("style");
            h_style.setAttribute("type", "text/css");
            h_style.innerHTML = str;
            document.getElementsByTagName('head')[0].appendChild(h_style);
        }
    </script>
</head>
<body>
<div class="page_game"    style=" background: url({if $game['g_bpic']}{$game['g_bpic']}{else}{$UrlPath}/images/game_bottom.png{/if}) no-repeat 0 2.86rem;
    background-size: cover;">
    <div class="box_top_box" style=" background: url({if $game['g_tpic']}{$game['g_tpic']}{else}{$UrlPath}/images/game_top.png{/if}) no-repeat 0 0;     background-size: cover;">
        <div class="box_top">
            <div class="game_explain"">
            <a href="{php echo $this->createMobileUrl('describe', array('gid' => $game['id']))}" style="color:inherit;display:table;width:100%;height:100%;">
                <p class="area" style="display:table-cell;width:100%;height:100%;vertical-align:middle;line-height:.85rem;">游戏说明</p>
            </a>
            </div>
            <div class="get_store">
                <p class="score-container"></p>
            </div>
            <div class="before_best">
                <p class="best-container"></p>
            </div>
            {if $game['prize']}
              <div class="jx">
                    <p class="game_award"><a style="color:inherit;" href="{php echo $this->createMobileUrl('prize', array('gid' => $game['id']))}">奖项</a></p>
             </div>
           {/if}
            <div class="top   {if $game['prize']}has_jx {/if}" style="">
                <p class="game_pl"><a href="{php echo $this->createMobileUrl('billboard', array('gid' => $game['id']))}" style="color:inherit;">排行榜</a></p>
            </div>
            <div class="new_game  {if $game['prize']}has_jx {/if}" style="">
                <p class="restart-button"><a href="">新游戏</a></p>
            </div>
           </div>
    </div>
    <div class="box_game">
        <div class="game_tip">
        	{if $game['g_desc']}
            <p>{$game['g_desc']}</p>
            {/if}
        </div>
        <div class="game_content">
            <div class="container">
                <div class="game-container">
                    <div class="game-message">
                        <p></p>
                        <div class="lower">
                            <a class="keep-playing-button">Keep going</a>
                            <a class="retry-button">Try again</a>
                        </div>
                    </div>
                    <div class="grid-container">
                        <div class="grid-row">
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                        </div>
                        <div class="grid-row">
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                        </div>
                        <div class="grid-row">
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                        </div>
                        <div class="grid-row">
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                            <div class="grid-cell"></div>
                        </div>
                    </div>
                    <div class="tile-container">

                    </div>
                </div>
            </div>
        </div>
        <!--<div class="game_from">
            <p>XXX出品</p>
        </div>-->
    </div>
</div>
<!--dialog-->

<!--挑战大奖-->
<div class="div_mask" id="message_without_app">
    <div class="dialog_login">
        <div class="top">
            <p class="tip">去往微信参与</p>
            <p class="text" style="margin-top:-7px;">挑战大奖</p>
            <p style="margin-top:11px;font-size:.28rem;">注：</p>
        </div>
        <div class="bottom clearfix">
            <a id="out_bt_cloese">忽略</a>
            <a href="{$config['link']}">打开</a>
        </div>
    </div>
</div>

<!--游戏结束-->
<div class="div_mask self-game-result" id="self-game-over">
    <div class="dialog_end cry_box">
        <div class="top">
            <img src="{$UrlPath}/images/game_end.png" alt="" />
            <div class="clearfix"><p class="fl">本局得分&nbsp;&nbsp;</p><span class="fl" id="lose_game_score"></span></div>
            <div class="clearfix"><p class="fl">历史最高&nbsp;&nbsp;</p><span class="fl" id="highest_score"></span></div>
            
        </div>
        <div class="bottom clearfix">
            <a href="javascript:;" onclick="chongwan()" class="game_reset_bt">重玩</a>
            <a class="share_bt_out_app">分享</a>
        </div>
        <!--立即打开-->
<!--        <div class="open_now_container">
            <p class="shadow_font"></p>
            <a class="btn_open" href="{$config['link']}">立即打开</a>
        </div>-->
    </div>
</div>
<!--恭喜通关-->
<div class="div_mask self-game-result" id="self-game-won">
    <div class="dialog_pass cry_box">
        <div class="top">
            <img src="{$UrlPath}/images/game_pass.png" alt="" />
            <div class="clearfix"><p class="fl">耗时&nbsp;&nbsp;</p><span class="fl" id="lastTime"></span></div>
            <div class="clearfix"><p class="fl">加分&nbsp;&nbsp;</p><span class="fl" id="add_score"></span></div>
            <div class="clearfix"><p class="fl">本局得分&nbsp;&nbsp;</p><span class="fl" id="won_game_score"></span></div>
        </div>
        <div class="bottom">
            <a href="javascript:;" onclick="chongwan()" class="game_reset_bt">重玩</a>
            <a class="share_bt_out_app" 
            >分享</a>
            <div class="clearfix"></div>
        </div>
        <!--立即打开-->
      <div class="open_now_cogame_tipntainer">
            <p class="shadow_font"></p>
            <a class="btn_open" href="{$config['link']}">立即打开</a>
        </div>
    </div>
</div>



<script src="{$UrlPath}/js/bind_polyfill.js"></script>
<script src="{$UrlPath}/js/classlist_polyfill.js"></script>
<script src="{$UrlPath}/js/animframe_polyfill.js"></script>
<script src="{$UrlPath}/js/keyboard_input_manager.js"></script>
<script src="{$UrlPath}/js/html_actuator.js"></script>
<script src="{$UrlPath}/js/grid.js"></script>

<script>
    function Tile(position, value) {
        //添加字面意思
        var address = [];
	        address[2] = '{if $text[0]}{$text[0]}{else}2{/if}';
	        address[4] = '{if $text[1]}{$text[1]}{else}4{/if}';
	        address[8] = '{if $text[2]}{$text[2]}{else}8{/if}';
	        address[16] = '{if $text[3]}{$text[3]}{else}16{/if}';
	        address[32] = '{if $text[4]}{$text[4]}{else}32{/if}';
	        address[64] = '{if $text[5]}{$text[5]}{else}64{/if}';
	        address[128] = '{if $text[6]}{$text[6]}{else}128{/if}';
	        address[256] = '{if $text[7]}{$text[7]}{else}256{/if}';
	        address[512] = '{if $text[8]}{$text[8]}{else}512{/if}';
	        address[1024] = '{if $text[9]}{$text[9]}{else}1024{/if}';
	        address[2048] = '{if $text[10]}{$text[10]}{else}2048{/if}';
	    this.x   = position.x;
        this.y                = position.y;
        this.value            = value || 2;
        this.address          = address[value];
        this.previousPosition = null;
        this.mergedFrom       = null; // Tracks tiles that merged together
    }

    Tile.prototype.savePosition = function () {
        this.previousPosition = { x: this.x, y: this.y };
    };

    Tile.prototype.updatePosition = function (position) {
        this.x = position.x;
        this.y = position.y;
    };

    Tile.prototype.serialize = function () {
        return {
            position: {
                x: this.x,
                y: this.y
            },
            value: this.value,
            address: this.address
        };
    };
</script>
<script src="{$UrlPath}/js/local_storage_manager.js"></script>
<script src="{$UrlPath}/js/game_manager.js"></script>

<script>
    var score = "{$game_user['score']}";
    var uid = "{$game_user['id']}";

    // Wait till the browser is ready to render the game (avoids glitches)
    window.requestAnimationFrame(function () {
        
            $(".open_now_container").show();
            $(".open_now_cogame_tipntainer").show();
            //$(".game_reset_bt").css({'width':'100%','border':'none'});            
           // $('#message_without_app').css('display','block');
          //  $('#out_bt_cloese').on('click',function(){      
                $('#out_bt_cloese').parents('.div_mask').fadeOut(100);
                var time = new Date().getTime();                
                var new_activity = new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager, 2048, time, score);
          //  });
      
    });
    
  
    //获得结果
    function get_status(status,lasts_time,score,best_score,start_time){  
        
        var obj = $('#self-'+status);
        var s_lasts_time = parseInt((lasts_time/1000));
        var add_score = 0;
        var db_game_result = '';
        
        if(status=='game-won'){
            add_score = parseInt(10000000/s_lasts_time);
            $('#lastTime').html(s_lasts_time+'\u79d2');
            $('#add_score').html(add_score);
            $('#won_game_score').html(score);
            db_game_result = 1;
        }else if(status=='game-over'){
            $('#lose_game_score').html(score);
            $('#highest_score').html(best_score);
            db_game_result = 0;
        }

        if(uid){
            var db_playtime = parseInt(start_time/1000);
            var db_score = parseInt(score) + parseInt(add_score);
            var db_game_lasts_time = s_lasts_time;
            var db_user_id = uid;
            var db_gid = "{$game['id']}";
        
//            var Http = new XMLHttpRequest();
//            var url = "{$_G['siteurl']}plugin.php?id=qidou_2048:ajax_2048";
//            Http.open('POST',url,true);
//            Http.onreadystatechange = function (){
//                if(Http.readyState == 4){
//                 
//                    
//                }
//            }
//            Http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//            Http.send('mod=jilu&formhash={FORMHASH}&playtime='+db_playtime+'&score='+score+'&game_result='+db_game_result+'&lasts_time='+db_game_lasts_time+'&gid='+db_gid+'&user_id='+db_user_id);
//     
                $.ajax({
                type : 'POST',
                url : "{php echo $this->createMobileUrl('jilu')}",             
                dataType : 'json',
                data : {'playtime':db_playtime,'score':score,'game_result':db_game_result,'lasts_time':db_game_lasts_time,'gid':db_gid,'user_id':db_user_id},
                success : function(data){
                        // console.log('\u8bb0\u5f55\u6210\u529f');
                       // alert(data.score);
                        if(data.status == 1){
                           score = data.score;
                        }
                        
                }
             }); 
             
                  
        }
        obj.fadeIn(800);
    }
    $('.share_Bt_in_app').on('click',function(){
        //QFH5.openShareDialog();
    });
    
    function chongwan(){
        $(".self-game-result").hide();
//         var time = new Date().getTime();                
//         var new_activity = new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager, 2048, time, score);
        location.reload();
    }
    $(function(){
  
    $('.share_bt_out_app').click(function(){

       
            sq3.share({
                            type: "all", // 分享类型，wechat,qq,weibo,facebook,qqzone,wechattimeline,all
                            title: "{$game['title']}", // 分享标题
                            content: "{$game['title']}", // 分享内容
                            url: "{$_G['siteurl']}plugin.php?id=qidou_2048&gid={$game['id']}", // 分享URL
                            picUrl: "", // 分享图片URL
                            topicId: 0, // 分享出去帖子ID
                            aid: 0,
                    success: function(data) {
                            $("#self-game-won").hide();
                            $("#self-game-over").hide();
                            alert("\u5206\u4eab\u6210\u529f");
                    },
                    error: function(data) {
                        showResult("share2 error errNo: " + data.errNo + ", errMsg: " + data.errMsg);
                    },
                    complete: function(result) {
                    }
                });
            

    });
      
    });
      
</script>
</body>
</html>